import React, { Component } from 'react'
/**
 * 使用createRef操作DOM的方式
 * 1) 在构造函数调用React.createRef()并将其赋值给类中的实例属性
 * 2) 在页面元素中为要操作的元素设置ref属性，例如:<div ref={this.成员属性}>
 * 3) 使用：this.成员变量.current
 */
export default class App extends Component {
  constructor(){
    super()
    this.nameEle=React.createRef()
  }
  login=()=>{
    console.log('姓名:',this.nameEle.current.value);
  }
  render() {
    return (
      <div>
         <div>
            <label htmlFor="name">姓名:</label>
            <input type="text" ref={this.nameEle}/>
         </div>
         <div>
            <button onClick={this.login}>登录</button>
         </div>
      </div>
    )
  }
}
